
//1.引入 转容器组件的插件
import { connect } from 'react-redux';

//引入动作
import { incrementAction, decrementAction, asyncIncrementAction } from '../store/action';

//getState 获取 store 中的数据
//用于显示的是ui组件
function Count(props) {
    return (
        <div >
            STORE中的数据是：{props.count}
            <button onClick={() => { props.increment(5) }}>++</button>
            <button onClick={() => { props.decrement(3) }}>--</button>
            <button onClick={() => { props.asyncIncrement(2) }}>延时2秒++</button>
        </div>
    );
}
//容器组件的写法
//mapStateToProps  将 store中的 state值映射给 props
function mapStateToProps(state) {
    return { count: state }
}

//将 props里面绑定的函数  映射到 store中的action
function mapDispatchToProps(dispatch) {
    return {
        increment: number => dispatch(incrementAction(number)),
        decrement: number => dispatch(decrementAction(number)),
        asyncIncrement: number => dispatch(asyncIncrementAction(number))
    }
}
//用于 处理逻辑和调用  redux 的是容器组件
//connect 将 ui组件转容器组件
export default connect(mapStateToProps, mapDispatchToProps)(Count);

//旧式写法